<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础配置管理</title>
    <link rel="stylesheet" href="element-ui.css">
    <style>
        html,body,.el-container{
            margin: 0;
            height:100%;
        }
        .app-menu{
            height: 100%;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            padding: 0px;
        }
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-input__inner{
            color: unset!important;
            cursor: unset!important;
            height: 33px !important;
        }
        .el-textarea__inner{
            color: unset!important;
            cursor: unset!important;
        }
        .local-menu-item{
            height: 36px;
            line-height: 36px;
        }
        .iconfont {
            font-size: 16px;
            margin-right: 5px;
            font-style: normal;
            cursor: pointer;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
<el-container id="properties">
    <el-aside width="400px" >
        <el-menu
                default-active="0"
                class="app-menu"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item :index="index+''" @click="clickType(item)" class="local-menu-item" v-for="(item, index) in types">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{item.dictionaryTypeDescription}}({{item.dictionaryTypeName}})</span>
                </template>
            </el-menu-item>
        </el-menu>
    </el-aside>
    <el-main>
        <el-container>
            <el-main>
                <el-table
                        :data="items"
                        border
                        style="width: 100%">
                    <el-table-column type="index" align="center" header-align="center"></el-table-column>
                    <el-table-column prop="dictionaryItemKey" label="显示内容" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-input type="textarea" autosize v-model="scope.row.dictionaryItemKey" :disabled="!editing"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dictionaryItemValue" label="映射值/分值" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.dictionaryItemValue" :disabled="!editing"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="leftValue" label="左边界值(>=)" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.leftValue" :disabled="!editing" :controls="false"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rightValue" label="右边界值(<)" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.rightValue" :disabled="!editing" :controls="false"></el-input-number>
                        </template>
                    </el-table-column>
                    <template v-if="editing">
                        <el-table-column
                                fixed="right"
                                label="操作"
                                align="center"
                                header-align="center"
                                width="100">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" content="上移" placement="top">
                                    <i class="iconfont el-icon-upload2 " style="color: #409EFF" @click="moveup(scope.$index)"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="下移" placement="top">
                                    <i class="iconfont el-icon-download " style="color: #409EFF" @click="movedown(scope.$index)"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                    <i class="iconfont el-icon-delete " style="color: #F56C6C;" @click="deleteitem(scope.$index)"></i>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-main>
            <el-footer style="text-align: center;">

                <template v-if="editing">
                    <el-button type="primary" @click="addItem">增加</el-button>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="saveItems" :loading="saving">{{saving?'保存中':'保存'}}</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="edit">修改</el-button>
                </template>
            </el-footer>
        </el-container>
    </el-main>
</el-container>
<script src="./vue.js"></script>
<script src="./element-ui.js"></script>
<script src="./axios.js"></script>
<script>
    new Vue({
        el: '#properties',
        data: {
            types: [
                // {dictionaryTypeId: 1, dictionaryTypeName: "cube_expand", dictionaryTypeDescription: "膨胀倍数占比"},
                // {dictionaryTypeId: 2, dictionaryTypeName: "cube_slow_query", dictionaryTypeDescription: "慢查询分隔"}
            ],
            items: [
                // {dictionaryItemId: "1", dictionaryItemKey: "0~5", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 0.000000, rightValue: 5.000000},
                // {dictionaryItemId: "2", dictionaryItemKey: "5~10", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 5.000000, rightValue: 10.000000},
                // {dictionaryItemId: "2", dictionaryItemKey: "10~20", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 10.000000, rightValue: 20.000000}
            ],
            deleteItems: [],
            currentType: null,
            saving: false,
            editing: false
        },
        mounted: function () {
            this.loadDictionaryType();
        },
        methods: {
            clickType(type){
                if(this.currentType && type.dictionaryTypeId == this.currentType.dictionaryTypeId){
                    return;
                }
                this.loadDictionaryItem(type);
            },
            loadDictionaryType(){
                axios.get(`dictionary/types`)
                    .then(resp=>resp.data.data)
                    .then(data=>{
                        this.types = data;
                        if(data.length > 0){
                            this.loadDictionaryItem(data[0]);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    });
            },
            loadDictionaryItem(type){
                this.saving = false;
                this.editing =false;
                this.currentType = type;
                axios.get(`dictionary/items?typeId=${type.dictionaryTypeName}`)
                    .then(resp=>resp.data.data)
                    .then(data=>{
                        this.items = data;
                        this.deleteItem = [];
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    });
            },
            saveItems(){
                this.saving = true;
                var allItems = this.items.concat(this.deleteItems);
                axios.post('dictionary/saveItems', allItems)
                    .then(resp=>resp.data)
                    .then(result => {
                        this.saving = false;
                        this.editing =false;
                        this.$message.success('保存成功');
                    })
                    .catch(error => {
                        this.saving = false;
                        this.editing =false;
                        this.$message.error(error.message);
                    });
            },
            edit(){
                this.editing = true;
            },
            cancel(){
                this.editing = false;
                this.loadDictionaryItem(this.currentType);
            },
            addItem(){
                let newItem = {dictionaryItemKey: null,
                                dictionaryItemValue: null,
                                dictionaryTypeId: this.currentType.dictionaryTypeId,
                                dictionaryType: this.currentType.dictionaryTypeName,
                                leftValue: 0,
                                rightValue: 999999,
                                delete: false};
                this.items.splice(this.items.length,0,newItem);
            },
            deleteitem(index) {
                let item = this.items[index];
                if(item.dictionaryItemId){
                    item.delete = true;
                    this.deleteItems.splice(this.deleteItems.length,0,item);
                }
                this.items.splice(index,1);
            },
            moveup(index) {
                if (index > 0) {
                    let upItem = this.items[index];
                    this.items.splice(index,1);
                    this.items.splice(index-1,0,upItem);
                }else{
                    this.$message.error('已经是第一行！');
                }
            },
            movedown(index){
                if (index < this.items.length - 1) {
                    let upItem = this.items[index+1];
                    this.items.splice(index+1,1);
                    this.items.splice(index,0,upItem);
                }else{
                    this.$message.error('已经是最后一行！');
                }
            }
        }
    })
</script>
</body>
</html>